﻿<!DOCTYPE html>
<html lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> 个人中心 </title>
    <!-- favicon -->
    
    <!-- bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- fontawesome -->
    <link rel="stylesheet" href="assets/css/fontawesome-all.min.css">
    <!-- animate.css -->
    <link rel="stylesheet" href="assets/css/animate.css">
    <!-- Owl Carousel -->
    <link rel="stylesheet" href="assets/css/owl.carousel.min.css">
    <!-- magnific popup css -->
    <link rel="stylesheet" href="assets/css/magnific-popup.css">
    <!-- slick css -->
    <link rel="stylesheet" href="assets/css/slick.min.css">
    <!-- stylesheet -->
    <link rel="stylesheet" href="assets/css/style.css">
    <!-- responsive -->
    <link rel="stylesheet" href="assets/css/responsive.css">
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
</head>
<style>
	 .breadcumb-area.breadcrumb-bg {
    background-image: url(assets/img/bg/bg2.jpg);
    background-position: center;
    background-size: cover; }
</style>
<body>

    <!-- ============Start Navigation ===== -->
     <nav class="navbar navbar-area navbar-expand-lg navbar-light bg-zoo">
        <div class="container">
        <div class="navbar-header">
            <a class="navbar-brand logo" href="index.html">
                <img src="assets/img/logo.png" alt="logo image">
            </a>
        </div>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarSupportedContent">
            <ul class="navbar-nav">
             
                <li class="nav-item">
                    <a class="nav-link" href="index.html">主页 </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="探索海洋.html">探索海洋</a>
                </li>
               
                <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true"
                        aria-expanded="false">
                        鲸彩活动
                    </a>
                    <div class="dropdown-menu">
                        <a class="dropdown-item" href="热点新闻.html">热点新闻</a>
                        <a class="dropdown-item" href="馆内活动.html">馆内活动</a>
                    </div>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="出行锦囊.html">出行锦囊</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="联系我们.html">联系我们</a>
                </li>
                <li class="nav-item active">
                    <a class="nav-link" href="个人中心.html">个人中心</a>
                </li>
                
            </ul>          
        </div>
        <div class="right-btn-wrapper">
            <a href="ticket.html" class="boxed-btn"> <i class="fas fa-ticket-alt"></i>点我购票</a>
        </div>

        </div>
    </nav> 
    <!-- ============End Navigation ===== -->
    <div class="body-overlay" id="body-overlay"></div>
    <div class="search-popup" id="search-popup">
        <form action="index.html" class="search-popup-form">
            <div class="form-element">
                <input type="text" class="input-field" placeholder="Search.....">
            </div>
            <button type="submit" class="submit-btn"><i class="fas fa-search"></i></button>
        </form>
    </div>

<!-- Breadcumb area start  -->
<section class="breadcumb-area breadcrumb-bg">
    <div class="container">
        <div class="row ">
            <div class="col-lg-12">
                <div class="breadcumb-inner">
                    <h2 class="title">个人中心</h2>
                    <ul class="page-list">
                        <li><a href="index.html" style="color: orange;">返回主页</a></li>
                        <li>个人中心</li>
                    </ul>
                </div>

            </div>
        </div>
    </div>
</section>
<!-- Breadcumb area end  -->

<div id="app">
  <el-table :data="tableData" border stripe style="width: 100% ; ">
    <el-table-column prop="userId" label="用户Id"  sortable  width="300"></el-table-column>
    <el-table-column prop="username" label="用户名"  width="300"></el-table-column>
    <el-table-column prop="bookingName" label="票名"  width="300"></el-table-column>
    <el-table-column prop="adultNumber" label="成人票/数量"  width="300"></el-table-column>

    <el-table-column prop="childNumber" label="儿童票/数量"  width="300"></el-table-column>
    <el-table-column prop="totalPrice" label="总价格"  width="300"></el-table-column>
  </el-table>

  <div style="margin: 10px 0">
    <el-pagination
            v-model:currentPage="currentPage"
            :page-sizes="[5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
    >
    </el-pagination>
  </div>
</div>


<!-- footer area start -->
<footer class="footer-area footer-bg">
		<div class="footer-wrap">
            <div class="container">
                <div class="row">
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="footer-widget about">
                            <div class="widget-title">
                                <div class="footer-logo">
                                    <a href="index.html"><img src="assets/img/footer-logo.png" alt="footer logo"></a>
                                </div>
                            </div>

                            <div class="widget-body">
                                <p>地址：辽宁省大连市旅顺口区大连交通大学旅顺校区 </p>
                                <p class="call-us">17866535753</p>
                                <p>E.mail：1511347324@qq.com</p>
                                
                            </div>
                        </div>
                    </div>

                    <div class="col-lg-3 col-md-6 col-sm-6">
                       <div class="footer-widget">
                            <div class="widget-title">
                                <h3 class="title">快速导航</h3>
                            </div>
                           <div class="widget-body">
                                <ul class="footer-links">
                                    <li> <a href="探索海洋.html "><img src="assets/img/footer-icon.png" alt=""> 探索海洋 </a></li>
                                    <li> <a href="热点新闻.html"><img src="assets/img/footer-icon.png" alt=""> 热点新闻 </a></li>
                                    <li> <a href="馆内活动.html"><img src="assets/img/footer-icon.png" alt=""> 馆内活动 </a></li>
                                    <li> <a href="出行锦囊.html"><img src="assets/img/footer-icon.png" alt=""> 出行锦囊 </a></li>
                                    <li> <a href="联系我们.html"><img src="assets/img/footer-icon.png" alt=""> 联系我们 </a></li>
                                    <li> <a href="个人中心.html"><img src="assets/img/footer-icon.png" alt=""> 个人中心 </a></li>
                                </ul>
                           </div>
                       </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6">
                       <div class="footer-widget">
                            <div class="widget-title">
                                
                            </div>
                           <div class="widget-body">
                                
                           </div>
                       </div>
                    </div>
                    <div class="col-lg-3 col-md-6 col-sm-6">
                        <div class="footer-widget contact-info">
                            <div class="widget-title">
                                    <h3 class="title">精彩看点</h3>
                            </div>
                            <div class="widget-body">
                                <ul class="instagram-img">
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/1.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/2.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/3.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/4.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/5.jpg"></a></li>
                                    <li class="col-xs-4 col-4"><a href="#"><img alt="" src="assets/img/instagram/6.jpg"></a></li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
    </div><!--footer top end-->
    <div class="copyright-area"><!--copyright area start-->
        <div class="container">
            <div class="row">
                <div class="col-lg-6">
                    &#169; <span class="zoo-color">阿淋海洋世界</span> 2022. 1821030107郑博淋.
                </div>
                <div class="col-lg-6">
                    <ul class="copyright-links"> 
                        <li> <a href="#">个人中心</a></li>
                        <li> <a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div><!-- /.row-->
        </div> <!-- /.container -->
    </div> <!--copyright area end-->
</footer>
<!-- footer area end -->

<!-- back to top start -->
<div class="back-to-top">
    <!-- back to top start -->
    <i class="fas fa-rocket"></i>
</div>
<!-- back to top end -->

<!-- preloader area start -->
<div class="preloader" id="preloader">
    <div class="loader loader-1">
        <div class="loader-outter"></div>
        <div class="loader-inner"></div>
    </div>
</div>
<!-- preloader area end -->

<!-- jquery -->
<script src="assets/js/jquery.js"></script>
<!-- bootstrap -->
<script src="assets/js/bootstrap.min.js"></script>
<!-- owl carousel -->
<script src="assets/js/owl.carousel.min.js"></script>
<!-- wow js-->
<script src="assets/js/wow.min.js"></script>
<!-- magnific popup js -->
<script src="assets/js/jquery.magnific-popup.js"></script>
<!-- slick js-->
<script src="assets/js/slick.min.js"></script>
<!-- filterizr js-->
<script src="assets/js/jquery.filterizr.min.js"></script>

<!-- main -->
<script src="assets/js/main.js"></script>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://unpkg.com/vue-router@3.5.1/dist/vue-router.js"></script>
    <script type="text/javascript">

      var app = new Vue({
        el: '#app',
        data(){
          return{
            tableData: [],
            search :'',
            currentPage : 1,
            pageSize :3,
            total :0,
            option:'',
          }

        },
        methods:{

          load(){
            axios.get("http://localhost:8090/userShop",{
              params: {
                pageNum: this.currentPage,
                pageSize: this.pageSize,
                search: this.search,
                option :this.option

              }
            }).then(res=>{
              console.log(res)
              this.tableData = res.data.data.records
              this.total = res.data.data.total
            })
          },
          handleSizeChange(pageSize){
            this.pageSize = pageSize
            this.load()

          },
          //改变当前页 element-plus提供了改变之后pageSize的值
          handleCurrentChange(pageNum){

            this.currentPage = pageNum
            this.load()

          }

        },
        created(){
          this.load();
        }
      });

    </script>
</body>

</html>
